<template>
  <div class="w-full flex items-end gap-x-4 custom_auto pb-2">
    <div class="flex-1">
      <ZmAutocomplete
        v-if="payload?.messageType === messageType.ZM || payload.messageType === messageType.GP"
        @update:model-value="handleChangeSelectValue"
        :model-value="payload?.payload?.value || null"
      >
      </ZmAutocomplete>

      <JWAutocomplete
        v-if="payload?.messageType === messageType.JW"
        @update:model-value="handleChangeSelectJwValue"
        :model-value="payload?.payload?.value || null"
      ></JWAutocomplete>
    </div>
    <div>
      <v-menu location="bottom">
        <template v-slot:activator="{ props }">
          <div class="flex items-center text-title">
            <v-btn variant="plain" v-bind="props">
              {{ activeSelectName }}
            </v-btn>
            <j-icon :size="10" color="#ffffff">down-outlined</j-icon>
          </div>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in items"
            :key="index"
            @click="handleChangeActiveSelectType(item.value, index, item)"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </div>
  </div>
</template>
<script setup>
import { computed, ref, shallowRef, reactive, defineEmits, useModel, effect } from "vue";
import { messageType } from "../../../config";
import "./autocomplete.css";
import ZmAutocomplete from "./ZmAutocomplete.vue";
import JWAutocomplete from "./JwAutocomplete.vue";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({ messageType: messageType.ZM, payload: { value: "" } }),
  },
});
const emit = defineEmits(["change", "update:modelValue"]);

const payload = useModel(props, "modelValue", emit);
const autocompleteLoading = ref(false);

const zmList = shallowRef([]);

const activeSelectName = computed(() => {
  return items.find((item) => item.value === payload.value.messageType).title;
});
const items = [
  { title: "歌词", value: messageType.ZM },
  { title: "经文", value: messageType.JW },
  { title: "歌谱", value: messageType.GP },
];

const handleChangeActiveSelectType = (value) => {
  if (payload.value.messageType === value) return;
  payload.value.messageType = value;
  onChange();
};

const handleChangeSelectJwValue = (value) => {
  console.log(value);
  payload.value.payload = { value };
  onChange();
};

effect(() => {
  switch (payload.value.messageType) {
    case messageType.ZM:
    case messageType.GP:
      break;
    case messageType.JW:
      resetConfig();
      break;
  }
});

async function handleGetJingWen() {
  autocompleteLoading.value = true;
}

function handleChangeSelectValue(value) {
  payload.value.payload = { value };
  onChange();
}

function onChange() {
  emit("change", payload.value);
}

function resetConfig() {
  zmList.value = [];
  payload.value.payload = { value: null };
}
</script>
<style scoped lang="less"></style>
